<template>
	<view class="state-top">
		<!-- 待付款 -->
		<template v-if="orderState===1">
			<view class="imgBox">
				<image src="http://qiniu.suboshimuying.cn/static/order/ic-time@2x.png" mode=""></image>
				<text>待付款</text>
			</view>
			<view class="flexC" style="font-size: 26rpx;margin-top: 16rpx;">
				<u-count-down :time="countDown" format="mm:ss"></u-count-down>
				<text style="font-size: 15px;line-height: 22rpx;">后自动取消订单</text>
			</view>
		</template>
		<!-- 取消 -->
		<template v-if="orderState===11">
			<view class="imgBox">
				<image src="http://qiniu.suboshimuying.cn/static/order/ic-cancle@2x.png" mode=""></image>
				<text>已取消</text>
			</view>
		</template>
		<!-- 待自提 -->
		<template v-if="orderState===4">
			<view class="imgBox">
				<image src="http://qiniu.suboshimuying.cn/static/frame.png" mode=""></image>
				<text>待自提</text>
			</view>
		</template>
		<!-- 待服务 -->
		<template v-if="orderState===2">
			<view class="imgBox">
				<image src="http://qiniu.suboshimuying.cn/static/order/ic-cancle@2x.png" mode=""></image>
				<text>待服务</text>
			</view>
		</template>
		<!-- 待发货 -->
		<template v-if="orderState===3">
			<view class="imgBox">
				<image src="http://qiniu.suboshimuying.cn/static/order/ic-daishou@2x.png" mode=""></image>
				<text>待发货</text>
			</view>
		</template>
		<!-- 待收货 -->
		<template v-if="orderState===5">
			<view class="imgBox">
				<image src="http://qiniu.suboshimuying.cn/static/order/ic-daishou@2x (1).png" mode=""></image>
				<text>待收货</text>
			</view>
		</template>
		<!-- 待评价 -->
		<template v-if="orderState===6">
			<view class="imgBox">
				<image src="http://qiniu.suboshimuying.cn/static/order/Frame@2x (2).png" mode=""></image>
				<text>待评价</text>
			</view>
		</template>
		<!-- 已完成 -->
		<template v-if="orderState===7">
			<view class="imgBox">
				<image src="http://qiniu.suboshimuying.cn/static/order/ic-suss-wanc@2x.png" mode=""></image>
				<text>已完成</text>
			</view>
		</template>
		<!-- 退货 商品跳转refundResult -->
		<!-- 		<template v-if="orderState===12">
			<view class="imgBox">
				<image src="http://qiniu.suboshimuying.cn/static/order/ic-suss-wanc@2x.png" mode=""></image>
				<text>已退货</text>
			</view>
		</template> -->
	</view>
</template>

<script>
	export default {
		props: {
			// 订单状态
			orderState: {
				require: true
			},
			// 代付款的计时器
			countDown: {
				require: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.state-top {
		margin: auto;
		color: rgba(255, 255, 255, 1);
		font-size: 40rpx;
		font-weight: 600;
		text-align: center;

		.imgBox {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		image {
			width: 48rpx;
			height: 48rpx;
			// opacity: 1;
			// vertical-align: middle;
			margin-right: 12rpx;
		}


	}
</style>
